<script setup>
import { ref, onMounted } from "vue";
import { useSideBarStore } from "@/stores/homePage/SideBar/index.js";
import { storeToRefs } from "pinia";
import { useRouter } from "vue-router";
const router = useRouter();
const { getSideList } = useSideBarStore();
const { sideList, activeFlag, parentType } = storeToRefs(useSideBarStore());
const url = ref("");

onMounted(() => {
  getSideList();
  console.log(window.location.href, typeof window.location.href);
  url.value = window.location.href.slice(22, 26);
  console.log(url.value);
});

// provide('activeFlag',activeFlag)
const toHome = (index, id) => {
  // console.log(index)
  console.log(id);
  activeFlag.value = index;
  parentType.value = id;
  // console.log(activeFlag.value);
  if (
    url.value != "home" ||
    window.location.href.includes("/main") ||
    window.location.href.includes("/user") ||
    window.location.href.includes("/message")
  ) {
    router.push("/home");
    // window.location.hash = id;
  } else {
    // console.log(window.location.href);
    console.log(url.value);
  }
};

defineProps(["isOpen"]);
const showId = ref(null);

function isShow(id) {
  if (showId.value == id) {
    showId.value = null;
  } else {
    showId.value = id;
  }
}
</script>

<template>
  <div class="side">
    <div class="top">
      <img src="/src/assets/images/title.png" alt="" v-if="isOpen" class="logo" />
      <img src="/src/assets/images/titleY.png" alt="" v-else class="logoY" />
    </div>
    <div class="main">
      <!-- 展开 -->
      <ul class="open" v-if="isOpen">
        <li class="main_item">
          <div class="topBox" data-title="1">
            <i class="iconfont icon-icon"></i>
            <a href="#xztj" @click="toHome(0, 'xztj')">小站推荐</a>
          </div>
        </li>
        <li class="main_item" v-for="(item, index) in sideList" :key="item.id">
          <div class="topBox" data-title="2" @click="isShow(item.id)">
            <i class="iconfont" :class="item.icon"></i>
            <a>
              {{ item.name }}
            </a>
            <i
              class="iconfont shou"
              :class="showId == item.id ? 'icon-zhankai' : 'icon-shouqixiangyou14'"
            ></i>
          </div>
          <ul :style="showId == item.id ? 'max-height:500px;' : ''">
            <li v-for="type in item.type" :key="type.id">
              <a :href="`#${type.id}`" @click="toHome(index + 1, item.toA)">{{
                type.name
              }}</a>
            </li>
          </ul>
        </li>
      </ul>
      <!-- 收起 -->
      <ul class="close" v-else>
        <li class="main_item">
          <el-popover placement="right-start" popper-class="myItem" trigger="hover">
            <template #reference>
              <i class="iconfont icon-icon"></i>
            </template>
            <ul>
              <li>
                <a href="#xztj" @click="toHome(0, 'xztj')">小站推荐</a>
              </li>
            </ul>
          </el-popover>
        </li>
        <li class="main_item" v-for="(item, index) in sideList" :key="item.id">
          <el-popover placement="right-start" popper-class="myItem" trigger="hover">
            <template #reference>
              <i class="iconfont" :class="item.icon"></i>
            </template>
            <ul>
              <li>
                <span>{{ item.name }}</span>
              </li>
              <li v-for="type in item.type" :key="type.id">
                <a :href="`#${type.id}`" @click="toHome(index + 1, item.id)">{{
                  type.name
                }}</a>
              </li>
            </ul>
          </el-popover>
        </li>
      </ul>
    </div>
    <div class="bottom">
      <ul class="open" v-if="isOpen">
        <li class="main_item" @click="router.push('/message')">
          <div class="topBox" data-title="1">
            <i class="iconfont icon-liuyan"></i>
            <span>留言板</span>
          </div>
        </li>
      </ul>

      <ul class="close" v-else>
        <li class="main_item">
          <el-popover placement="right-start" popper-class="myItem" trigger="hover">
            <template #reference>
              <i class="iconfont icon-liuyan"></i>
            </template>
            <ul>
              <li @click="router.push('/message')">
                <span>留言板</span>
              </li>
            </ul>
          </el-popover>
        </li>
      </ul>
    </div>
  </div>
</template>

<style scoped>
@import url("/src/assets/style/homePage/sideBar/index.scss");
</style>
<style lang="scss">
.myItem.el-popper.is-light.el-popover {
  padding: 0;
  width: 120px;
  background-color: #f0f2f4;
  border: none;
  .el-popper__arrow:before {
    background-color: #dadbdd;
  }
  .el-popper__arrow:after {
    background-color: #f0f2f4;
  }
  ul {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    li {
      color: #515c6b;
      margin: 2px 4px;
      width: 90%;
      height: 30px;
      line-height: 30px;
      text-align: center;
      border-radius: 5px;

      &:nth-child(1) {
        width: 100%;
        border-radius: 5px;
        height: 40px;
        line-height: 40px;
        margin: 0;
        background-color: #dadbdd;
      }
      &:hover {
        color: #b895a7;
        background-color: #e0e0e0;
      }
      a {
        display: block;
        width: 100%;
        height: 100%;
        color: #515c6b;
      }
    }
  }
}
</style>
